<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Compoent</title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
</head>
<body>

        <div id="100"></div>
            <script type="text/babel">

                class FirstComponent extends React.Component {

                    render() {
                        let showStyle = {
                            backgroundColor:"#e0e0e0",
                            fontSize:19,
                            color:this.props.bgColor
                        };
                        return (
                            <div style={showStyle}>{this.props.children}</div>
                        );
                    }
                }
                let  superContant = document.getElementById('100');
                ReactDOM.render(
                    <div>
                        <FirstComponent name="1" bgColor="#96E067">
                            <div>H</div>
                        </FirstComponent>
                        <FirstComponent name="2" bgColor="#2F35E0">
                            <div>E</div>
                        </FirstComponent>
                        <FirstComponent name="3" bgColor="#E05DD6">
                            <div>L</div>
                        </FirstComponent>
                    </div>
                  ,
                    superContant
                );
            </script>
</body>
</html>